<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>服务列表-闲时网</title>

    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="../../css/services/serviceList.css" type="text/css">
    <link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.css" type="text/css">
    <link rel="stylesheet" href="../../plugins/layui/css/layui.css" type="text/css">
</head>

<body>
<%@ include file="../common/nav.jsp"%>

<!-- 二级导航 - begin-->
<div>
    <ul class="layui-nav" lay-filter="">
        <li class="layui-nav-item layui-this first-li"><a href="">全部服务</a></li>
        <li class="layui-nav-item"><a href="/demand/demandRelease">发布需求</a></li>
    </ul>
</div>
<!-- 二级导航 - end -->
<div style="overflow: hidden">
<div style="margin-top:10px;">
    <div style="float:left;width:25%;height:800px;margin-left:100px;">
        <div style="border: 1px solid grey;" id="left1">
            <div class="input-group" style="margin-top:30px;margin-left:20px;width: 90%">
                <input type="text" id="searchName" class="form-control" placeholder="老人/小孩/其他" onclick="this.placeholder=''" onblur="this.placeholder='老人/小孩/其他'">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button" onclick="selectAll()">
                        <span class="glyphicon glyphicon-search"></span>
                    </button>
                </span>
            </div>
            <hr style="width: 90%">
            <div>
                <p style="font-size: 20px;">服务分类</p>
                <nav class="navbar navbar-default" role="navigation">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <a class="navbar-brand" href="#">全部服务</a>
                        </div>
                        <div class="collapse navbar-collapse" >
                            <ul class="nav navbar-nav" id="category" >
                                <c:forEach items="${requestScope.categoryList}" var="t">
                                    <li class="dropdown" id="categoryId" value="${t.id}">
                                        <a href="" class="dropdown-toggle" data-toggle="dropdown" onclick="selectByCategory(${t.id})">
                                                ${t.name}<b class="caret"></b>
                                        </a>
                                        <ul class="dropdown-menu"
                                            style="width: 350px;margin-left:100%;margin-top:-30%;">
                                            <li id="categoryDetailId">
                                                <c:forEach items="${requestScope.categoryDetailList}" var="c">
                                                    <c:if test="${c.categoryId == t.id}">
                                                        <div class="col-md-4">
                                                            <div class="thumbnail" style="border:0;">
                                                                <a value="${c.id}" style="cursor: pointer;" onclick="selectByCategoryDetail(${c.id})">${c.name}</a>
                                                            </div>
                                                        </div>
                                                    </c:if>
                                                </c:forEach>
                                            </li>
                                        </ul>
                                    </li>
                                </c:forEach>
                            </ul>
                        </div>
                    </div>
                </nav>
                <%--<hr style="width: 90%">--%>
                <%--<div>--%>
                    <%--<p style="font-size: 20px;">收费模式</p>--%>
                    <%--<nav class="navbar navbar-default" role="navigation">--%>
                        <%--<ul class="nav navbar-nav">--%>
                            <%--&lt;%&ndash;<li><User href="#">全部</User></li>&ndash;%&gt;--%>
                            <%--<li><a href="#">&nbsp;按时间</a></li>--%>
                            <%--&lt;%&ndash;<li><User href="#">按项目</User></li>&ndash;%&gt;--%>
                        <%--</ul>--%>
                    <%--</nav>--%>
                <%--</div>--%>
            </div>
        </div>
        <div style="border:1px solid blue;margin-top:30px;">
            <p style="font-size: 20px;color:blue;margin:30px 0 0 20px;">为您排忧解难，是我们的责任</p>
            <p style="margin:20px 0 20px 20px;">发布需求苦服务太幸苦服务太幸苦服务<br>太幸苦服务太幸苦服务太幸苦</p>
            <p style="margin-left:50px;margin-bottom: 30px;"><button style="background-color: rgb(0, 132, 255);width:200px;height:50px;border:0px;" ><a href="/demand/demandRelease"style="color: white;">立即发布需求</a></button></p>
        </div>
    </div>
</div>

<!-- 右边 -->

<div id="right1" style="float: right;width:60%;border:1px solid grey;margin-right:50px;">
    <div class="container-fulid" style="margin-top:10px;margin-left:5px;">
        <div class="row" >
            <div class="collapse navbar-collapse" id="example-navbar-collapse" >
                <ul class="nav navbar-nav navbar-auto" id="cen">
                    <li><a href="/services/serviceListView" style="padding:10px;" >默认</a></li>
                    <li><a href="/services/servicesBybeginTime" style="padding:10px;">发布时间</a></li>
                    <li><a href="/services/servicesByCount" style="padding:10px;">成交次数</a></li>
                    <li><a href="/services/servicesByPrice" style="padding:10px;">价格↑</a></li>
                    <li><a href="/services/servicesByPriceDesc" style="padding:10px;">价格↓</a></li>
                    <li style="padding:10px;"><input type="text" id="minPrice"  style="width:40px;height:20px;"></li>
                    <li style="padding:10px;">~</li>
                    <li style="padding:10px;"><input type="text" id="maxPrice" style="width:40px;height:20px;"></li>
                    <li style="padding-top:7px;"><button onclick="servicesByPriceRange()">确认</button></li>
                </ul>
            </div>
        </div>
    </div>

    <%--<c:forEach items="${requestScope.pageInfo.list}" var="t">--%>
    <c:forEach items="${requestScope.servicesAndNameQueryVoList}" var="t">
        <c:if test="${t.status == 0}">
            <span id="serviceId" style="display: none" >${t.id}</span>
            <div class="col-md-4">
                <div class="thumbnail">
                    <a onclick="serviceDetail(${t.id})" style="cursor: pointer"><img src="${t.path}" ></a>
                    <span style="font-size: 20px;">￥${t.price}</span><span>/${t.chargetype}</span>
                    <p>${t.title}</p>
                    <div style="overflow: hidden">
                        <p style="float: left">${t.name}</p>
                        <p style="float:right">${t.city}</p>
                    </div>
                </div>
            </div>
        </c:if>
    </c:forEach>




    <%--<div class="col-md-12" style="margin-top:20px;margin-left:-150px;">--%>
        <%--&lt;%&ndash;分页&ndash;%&gt;--%>
        <%--<div class="container ula"  style="margin-top:-46px;" id="content1">--%>
            <%--<div class="container" style="text-align: center">--%>
                <%--<ul class="pagination">--%>
                    <%--<li><a href="javascript:goPage(1)">首页</a></li>--%>

                    <%--&lt;%&ndash;上一页&ndash;%&gt;--%>
                    <%--<c:if test="${pageInfo.pageNum>1}">--%>
                        <%--<li><a href="javascript:goPage(${pageInfo.pageNum-1})">&laquo;</a></li>--%>
                    <%--</c:if>--%>
                    <%--<c:if test="${pageInfo.pageNum<=1}">--%>
                        <%--<li class="disabled"><a>&laquo;</a></li>--%>
                    <%--</c:if>--%>

                    <%--<!--循环标签显示 - 显示5个--%>
                        <%--思路 - 起始值 - 从当前页--%>
                    <%---->--%>
                    <%--&lt;%&ndash;处理一下最终的页数&ndash;%&gt;--%>

                    <%--<c:if test="${pageInfo.pageNum+4<pageInfo.pages}">--%>
                        <%--<c:set var="startPage" value="${pageInfo.pageNum}"></c:set>--%>
                    <%--</c:if>--%>

                    <%--<c:if test="${pageInfo.pageNum+4>=pageInfo.pages}">--%>
                        <%--<c:set var="startPage" value="${pageInfo.pages-4}"></c:set>--%>
                    <%--</c:if>--%>

                    <%--<c:forEach begin="${startPage<=0?1:startPage}" end="${startPage+4}" var="n">--%>
                        <%--&lt;%&ndash;判断当前页是否高亮显示&ndash;%&gt;--%>
                        <%--<li <c:if test="${pageInfo.pageNum == n}">class='active'</c:if>> <a href="javascript:goPage(${n})">${n}</a></li>--%>
                    <%--</c:forEach>--%>


                    <%--&lt;%&ndash;下一页&ndash;%&gt;--%>
                    <%--<c:if test="${pageInfo.pageNum<pageInfo.pages}">--%>
                        <%--<li><a href="javascript:goPage(${pageInfo.pageNum+1})">&raquo;</a></li>--%>
                    <%--</c:if>--%>
                    <%--<c:if test="${pageInfo.pageNum>=pageInfo.pages}">--%>
                        <%--<li class="disabled"><a>&raquo;</a></li>--%>
                    <%--</c:if>--%>

                    <%--<li><a href="javascript:goPage(${pageInfo.pages})">尾页</a></li>--%>
                    <%--<li><a href="#">当前页${pageInfo.pageNum}/${pageInfo.pages}总页</a></li>--%>


                <%--</ul>--%>
            <%--</div>--%>
        <%--</div>--%>
        <%--分页--%>
        <%--<ul class="pagination" style="padding-left: 30%;">--%>
            <%--<li><a href="#" style="border: 0px;"></a></li>--%>
            <%--<li><a href="#">&laquo;</a></li>--%>
            <%--<li><a href="#">1</a></li>--%>
            <%--<li><a href="#">2</a></li>--%>
            <%--<li><a href="#">3</a></li>--%>
            <%--<li><a href="#">4</a></li>--%>
            <%--<li><a href="#">5</a></li>--%>
            <%--<li><a href="#">&raquo;</a></li>--%>
        <%--</ul>--%>
    </div>
</div>


</div>

<div>
    <%@ include file="../common/footer.jsp"%>
</div>

<!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
<script src="../../plugins/jquery/jquery.min.js"></script>
<!--引入bootstrap的js文件-->
<script src="../../plugins/bootstrap/js/bootstrap.js"></script>
<script src="../../js/services/serviceList.js"></script>
<script src="../../plugins/layui/layui.all.js"></script>

<script>
    function goPage(pageNum){
        window.location="${path}/services/serviceListView?pageNum="+pageNum;
    }
</script>
</body>

</html>

